<!DOCTYPE html>

<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				padding: 0;
				margin: 0;
				list-style: none;
			}
			
			body {
				width: 500px;
				margin: 150px auto;
			}
			
			ul li {
				background: url(img/radio.gif) no-repeat left 3px;
				padding-left: 20px;
				margin-bottom: 10px;
			}
			
			ul li.cur {
				background-position: left -17px;
			}
			
			ol li {
				background: url(img/duo1.png) no-repeat left 0;
				padding-left: 25px;
				line-height: 22px;
				margin-bottom: 10px;
			}
			
			ol li.cur {
				background-image: url(img/duo2.png);
			}
		</style>
		<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	</head>

	<body>
		<input type="radio" />
		<input type="checkbox" />
		<input type="checkbox" />
		<input type="checkbox" />
		<input type="checkbox" />
		<ul>
			<li class="cur">我虽然是li 但我可以变为单选按钮</li>
			<li>我虽然是li 但我可以变为单选按钮</li>
			<li>我虽然是li 但我可以变为单选按钮</li>
			<li>我虽然是li 但我可以变为单选按钮</li>
		</ul>
		<ol>
			<li class="cur">我虽然是li 但我可以变为多选按钮</li>
			<li>我虽然是li 但我可以变为多选按钮</li>
			<li>我虽然是li 但我可以变为多选按钮</li>
			<li>我虽然是li 但我可以变为多选按钮</li>
		</ol>
	</body>
	<script type="text/javascript">
		$("ul>li").click(function(){
			$(this).addClass("cur").siblings().removeClass('cur')
		})
		// toggleClass 自动判断有没有真个属性，没有就添加，有的话就去掉
		$("ol>li").click(function(){
			$(this).toggleClass("cur")			
		})
		
	</script>

</html>